<template>
  <div class="home">
    <router-view />
    <van-tabbar
      v-model="active"
      active-color="#1E8DFF"
      :route="true"
      :placeholder="true"
    >
      <van-tabbar-item
        :to="item.path"
        v-for="item in tabbarList"
        :key="item.path"
      >
        <template #icon="props">
          <img :src="props.active ? item.inIcon : item.icon" />
        </template>
        {{ item.title }}
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
// @ is an alias to /src
import { ref, reactive } from "vue";
export default {
  setup() {
    const active = ref("homepage");
    const tabbarList = reactive([
      {
        path: "/home/homepage",
        title: "首页",
        icon: require("@/assets/images/mall1_slices/首页@2x.png"),
        inIcon: require("@/assets/images/home1_slices/首页@2x.png"),
      },
      {
        path: "/home/community",
        title: "社区",
        icon: require("@/assets/images/mall1_slices/社区@2x.png"),
        inIcon: require("@/assets/images/community2_slices/社区@2x.png"),
      },
      {
        path: "/home/member",
        title: "会员",
        icon: require("@/assets/images/mall1_slices/会员@2x.png"),
        inIcon: require("@/assets/images/members3_slices/会员@2x.png"),
      },
      {
        path: "/home/shoppingmall",
        title: "商城",
        icon: require("@/assets/images/home1_slices/WechatIMG392.png"),
        inIcon: require("@/assets/images/mall1_slices/WechatIMG393.png"),
      },
      {
        path: "/home/mine",
        title: "我的",
        icon: require("@/assets/images/mall1_slices/我的@2x.png"),
        inIcon: require("@/assets/images/home1_slices/WechatIMG381.png"),
      },
    ]);
    return { active, tabbarList };
  },
};
</script>
<style lang="less" scoped>
p {
  font-size: 20px;
}
</style>
